<template>
  <el-form class="" :model="club" label-width="80px">
    <el-form-item label="社团编号"
      ><el-input v-model="club.num"></el-input
    ></el-form-item>
    <el-form-item label="社团名称"
      ><el-input v-model="club.name"></el-input
    ></el-form-item>
    <!-- <el-form-item label="社团创建时间" label-width="120px">
      <el-date-picker
        type="date"
        placeholder="选择日期"
        v-model="club.createTime"
        value-format="YYYY-MM-DD"
      />
    </el-form-item> -->
    <el-form-item label="社团简介">
      <QuillEditor
        v-model:content="club.introduce"
        ref="myQuillEditor"
        :options="editorOption"
        theme="snow"
        contentType="html"
        class="editor-container"
        @blur="onEditorBlur"
        @focus="onEditorFocus"
        @update:content="onEditorChange"
      />
    </el-form-item>
    <el-form-item label="社团类型">
      <el-select v-model="club.clubTypeId" placeholder="请选择社团类型">
        <el-option
          v-for="clubType in clubTypeList"
          :key="clubType.id"
          :label="clubType.type"
          :value="clubType.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="update">更新</el-button>
      <el-button @click="goBack">返回</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref, watch, onMounted } from "vue";
import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { useRoute, useRouter } from "vue-router";

const OK = 200;
const route = useRoute();
const router = useRouter();
const club = ref({});
const clubTypeList = ref([]);

const editorOption = ref({
  placeholder: "输入社团内容：",
  modules: {
    toolbar: [
      ["bold", "italic", "underline", "strike"],
      [{ header: [1, 2, 3, 4, 5, 6, false] }],
      ["blockquote", "code-block"],
      [{ list: "ordered" }, { list: "bullet" }],
      ["link", "image"],
    ],
  },
});

// 路由监听
watch(
  () => route.query.num,
  (newVal) => {
    if (newVal) get(newVal);
  }
);

// 方法定义
const get = async (num) => {
  try {
    const res = await $axios.get(`/api/clubs/${num}`);
    if (res.data.code === OK) {
      club.value = res.data.data;
    }
  } catch (error) {
    console.error(error);
  }
};

const update = async () => {
  try {
    const res = await $axios.put("/api/clubs/", club.value);
    if (res.data.code === OK) {
      ElMessage.success("更新社团成功");
      setTimeout(() => router.push({ name: "ClubList" }), 2000);
    }
  } catch (error) {
    ElMessage.error(error.message);
  }
};

const getClubTypeList = async () => {
  try {
    const res = await $axios.get("/api/clubTypes");
    if (res.data.code === OK) clubTypeList.value = res.data.data;
  } catch (error) {
    console.error(error);
  }
};

// 生命周期
onMounted(() => {
  console.log(route.query.num);
  getClubTypeList();
  get(route.query.num);
});
</script>

<style scoped>
.editor-container.ql-container.ql-snow {
  width: 100%;
  height: 40px;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  height: 40px;
  width: 100%;
  border-top: 0px;
}
</style>
